<template>
    <el-dialog @close="cancelAddOrder" v-model="dialogVisible" width="30%" title="新增工单信息" destroy-on-close center>
        <template #default>
            <el-form :model="order" label-width="100px" label-position="left">
                <el-form-item label="工单编码">
                    <el-input v-model="order.woCode" aria-placeholder="工单编码" />
                </el-form-item>
                <el-form-item label="工单名称">
                    <el-input v-model="order.woName" aria-placeholder="工单名称" />
                </el-form-item>
                <el-form-item label="来源类型">
                    <el-radio-group v-model="order.sourceType">
                        <el-radio :label="1">客户订单</el-radio>
                        <el-radio :label="2">库存备货</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item v-if="order.sourceType == 1" label="订单编号">
                    <el-input v-model="order.orderNum" aria-placeholder="订单编号" />
                </el-form-item>
                <el-form-item label="单据状态">
                    <el-select v-model="order.woStatus" placeholder="请选择单据状态">
                        <el-option label="草稿" value="1" />
                        <el-option label="已确认" value="2" />
                        <el-option label="已完成" value="3" />
                    </el-select>
                </el-form-item>
                <el-form-item label="工单类型">
                    <el-select v-model="order.woType" placeholder="请选择工单类型">
                        <el-option label="自产" value="1" />
                        <el-option label="外购" value="2" />
                        <el-option label="外协" value="3" />
                    </el-select>
                </el-form-item>
                <el-form-item label="产品编码">
                    <el-input
                        v-model="order.matId"
                        style="max-width: 600px"
                        placeholder="请选择产品"
                        class="input-with-select"
                    >
                        <template #append>
                            <el-button @click="toChooseMat" :icon="Search" />
                        </template>
                    </el-input>
                </el-form-item>
                <el-form-item label="产品名称">
                    <el-input disabled v-model="order.matName" aria-placeholder="产品名称" />
                </el-form-item>
                <el-form-item label="规格型号">
                    <el-input disabled v-model="order.matModel" aria-placeholder="规格型号" />
                </el-form-item>
                <el-form-item label="单位">
                    <el-input disabled v-model="order.matUnit" aria-placeholder="单位" />
                </el-form-item>
                <el-form-item v-if="order.sourceType == 1" label="客户编码">
                    <el-input
                        v-model="order.customerCode"
                        style="max-width: 600px"
                        placeholder="请选择客户"
                        class="input-with-select"
                    >
                        <template #append>
                            <el-button @click="toChooseCustomer" :icon="Search" />
                        </template>
                    </el-input>
                </el-form-item>
                <el-form-item v-if="order.sourceType == 1" label="客户名称">
                    <el-input disabled v-model="order.customerName" aria-placeholder="客户名称" />
                </el-form-item>
                <el-form-item v-if="order.woType != 1 && order.woType != null" label="供应商编码">
                    <el-input
                        v-model="order.supplierCode"
                        style="max-width: 600px"
                        placeholder="请选择供应商"
                        class="input-with-select"
                    >
                        <template #append>
                            <el-button @click="toChooseSupplier" :icon="Search" />
                        </template>
                    </el-input>
                </el-form-item>
                <el-form-item v-if="order.woType != 1 && order.woType != null" label="供应商名称">
                    <el-input disabled v-model="order.supplierName" aria-placeholder="供应商名称" />
                </el-form-item>
                <el-form-item label="工单数量">
                    <el-input type="number" v-model="order.woQuantity" aria-placeholder="工单数量" />
                </el-form-item>
                <el-form-item label="需求日期">
                    <el-date-picker
                        v-model="order.requireTime"
                        type="date"
                        placeholder="选择日期"
                        value-format="YYYY-MM-DD"
                    />
                </el-form-item>

                <el-form-item label="批次号">
                    <el-input v-model="order.batch" aria-placeholder="批次号" />
                </el-form-item>
                <el-form-item label="备注">
                    <el-input type="textarea" v-model="order.notes" aria-placeholder="备注" />
                </el-form-item>
            </el-form>
        </template>
        <!-- footer插槽中放两个按钮 -->
        <template #footer>
            <el-row>
                <el-col :span="12">
                    <el-button type="primary" @click="addOrder">确定</el-button>
                </el-col>
                <el-col :span="12">
                    <el-button type="primary" @click="cancelAddOrder">取消</el-button>
                </el-col>
            </el-row>
            <ChooseMat :visible="matChooseWinDialogVisible" @optionCompleted="chooseMatCompleted" @justCloseWin="closeChildDialog"/>
            <ChooseCustomer :visible="customerChooseWinDialogVisible" @optionCompleted="chooseCustomerCompleted" @justCloseWin="closeCustomerDialog"/>
            <ChooseSupplier :visible="supplierChooseWinDialogVisible" @optionCompleted="chooseSupplierCompleted" @justCloseWin="closeSupplierDialog"/>
        </template>
    </el-dialog>
</template>
<script>
import { watch } from "vue";
// 引入我们申明的order的api的js
import OrderRequest from "@/api/order.js";
import {Search} from "@element-plus/icons-vue";
import ChooseMat from "@/views/pro/craft/mat/choose/choose.vue";
import ChooseCustomer from "@/views/pro/order/choose/chooseCustomer.vue";
import ChooseSupplier from "@/views/pro/order/choose/chooseSupplier.vue";
import OrderBOMRequest from "@/api/orderBOM.js";
export default {
    components: {ChooseMat,ChooseCustomer,ChooseSupplier},
    computed: {
        Search() {
            return Search
        }
    },
    props:["visible","bomId","woId"],
    emits: ["optionCompleted","justCloseWin"], // 对外暴露一个事件
    data() {
        return {
            order: {
                woParentId:'',

            },
            dialogVisible: false,
            matChooseWinDialogVisible: false,
            customerChooseWinDialogVisible:false,
            supplierChooseWinDialogVisible:false
        }
    },
    methods: {
        setParentId(woParentId){
            this.order.woParentId = woParentId;
        },
        closeChildDialog(){
            this.matChooseWinDialogVisible = false;
        },
        closeCustomerDialog(){
            this.customerChooseWinDialogVisible = false;
        },
        closeSupplierDialog(){
            this.supplierChooseWinDialogVisible = false;
        },
        chooseSupplierCompleted(data){
            this.order.supplierCode = data.idSupport;
            this.order.supplierName = data.nameZh;
            this.supplierChooseWinDialogVisible = false;
        },
        chooseCustomerCompleted(data){
            this.order.customerCode = data.idCustomer;
            this.order.customerName = data.name;
            this.customerChooseWinDialogVisible = false;
        },
        chooseMatCompleted(data){
            this.order.matId = data.id;
            this.order.matName = data.name;
            this.order.matModel = data.model;
            this.order.matUnit = data.unitName;
            this.matChooseWinDialogVisible = false;
            console.log("matId")
            console.log(this.order.matId);
        },
        toChooseMat(){
            this.matChooseWinDialogVisible = true;
        },
        toChooseCustomer(){
            this.customerChooseWinDialogVisible = true;
        },
        toChooseSupplier(){
            this.supplierChooseWinDialogVisible = true;
        },
        /**
         * 取消添加工单
         */
        cancelAddOrder(){
            this.order = {};
            // 通知父组件  操作完成，让父组件关闭窗体
            this.$emit("optionCompleted");
        },
        /**
         * 添加工单
         */
        addOrder(){
            console.log("addOrder");

            this.order.woParentId = this.woId;
            console.log(this.order);
            OrderRequest.addOrder(this.order,res=>{
                if (res.code == '200'){
                    this.$message({
                        type: 'success',
                        message: '添加工单成功!'
                    });
                    this.order={};
                    // 通知父组件  操作完成，让父组件关闭窗体
                    this.$emit("optionCompleted");
                }else if(res.code == '300'){
                    this.$message({
                        type: 'warning',
                        message: '工单' + (res.msg.indexOf("woName") > 0 ?"名称":"类型") + "重复"
                    });
                }else{
                    this.$message({
                        type: 'error',
                        message: '添加工单失败!'
                    });
                }
            });
        },
        loadAddOrderList(bomId){
            console.log("this.bomId");
            console.log(bomId);//woId是null
            //创建一个order数组接收数据
            OrderBOMRequest.getByBomId(bomId,res => {
                console.log("getByBomId")
                console.log(res);
                if (res.data != null){
                    this.order = res.data;
                }
                console.log("order")
                console.log(this.order)
            });
        },

    }, mounted() {
        // 侦听props   一旦发生变化，就会出发下面的函数
        watch(() => this.visible, (newVal, oldVal) => {
            // 将最新的值设置给弹窗的dialogVisible属性
            this.dialogVisible = newVal;
            this.loadAddOrderList(this.bomId)
        });
    }
}
</script>